<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js"></script>
    <script src="../js/axios.min.js"></script>
</head>
<body>

<div id="app">
    <span>{{name}}</span><br>
    {{user.name}}---{{user.age}} <br>
    {{address[1]}}<br>
    =======================================
    <br>
    <span v-text="name">默认值</span><br>

    <span v-text="url">默认值</span><br>
    <span v-html="url">默认值</span><br>

    <!--<input type="button" value="提交" v-on:click="add()">-->
    =========================================
    <br>
    <input type="button" value="提交1" @click="add()">
    <input type="button" value="双击" @dblclick="dbadd()">
    <span v-text="message"></span><br>

    <input type="button" value="+" @click="sum()">
    <span v-text="num"></span>
    <input type="button" value="-" @click="sub()"><br>

    <input type="button" :value="buttonName" @click="dis()">
    <span v-show="isShow">嘿嘿</span> <br>

    <input type="button" :value="buttonName1" @click="dis1()">
    <span v-if="isShow1">啦啦</span><br>
    =========================================
    <br>
    <li v-for="a in address">{{a}}</li><br>

    <li v-for="user in userList">
        <span v-text="user.name"></span>---<span v-text="user.age"></span>
    </li><br>


    <input type="button" value="方法传参" @click="param(1,'test')">
    <span v-text="paramTest"></span><br>
    =========================================
    <br>
    <input type="text" @keyup.enter="param(1,'test')"/>
    <span v-text="paramTest"></span><br>

    <input type="text" @click="tongbuTest"/>
    <span v-text="tongbuTest"></span><br>



    <input type="button" value="axios" @click="ceshi()"> <br>

    computed: <span>{{jisuan}}</span><br>

    过滤器：<span>{{price | guolv}}</span>
    <input type="text" :value="price | guolv"><br>
    =========================================
    <br>
    监听：
    <label>名：<input type="text" v-model="firstName" /></label>
    <label>姓：<input type="text" v-model="lastName" /></label>
    {{fullNameComputed}}






</div>


<script type="text/javascript">
    var vue = new Vue({
        el:"#app",
        data:{
            name: "test",
            user:{
                name:"张三",
                age:18
            },
            address:["北京","上海"],
            userList:[
                {name:"zzzzz",age:16},
                {name:"ssss",age:17}
            ],
            url: "<a href='https://www.baidu.com'>百度一下</a>",
            message: "",
            num: 0,
            isShow: true,
            buttonName : "显示",
            isShow1: true,
            buttonName1 : "显示",
            paramTest: "",
            tongbuTest: "",
            a: 1,
            b: 2,
            price : 13,
            firstName: "",
            lastName : "",
            fullName : ""
        },
        methods:{
            ceshi(){
                axios.get("/abc?id=1").then(function (res) {
                    console.info("成功"+res.data)
                },function (error) {
                    console.info("错误路径")
                })
            },
            param(v1,v2){
                alert(v1 +"===="+v2)
                this.paramTest =v1 + v2;
            },
            dis(){
                this.isShow = !this.isShow;
                if(!this.isShow){
                    this.buttonName ="显示";
                }else{
                    this.buttonName ="隐藏";
                }
            },
            dis1(){
                this.isShow1 = !this.isShow1;
                if(!this.isShow1){
                    this.buttonName1 ="显示";
                }else{
                    this.buttonName1 ="隐藏";
                }
            },
            add() {
                alert(123);
            },
            dbadd(){
                console.info(this.user.name);
                alert(this.user.name)
                this.message = this.user.name;
            },
            sum(){
                if(this.num <5){
                    this.num ++;
                }else{
                    alert("已经最大值了")
                }
            },
            sub(){
                if(this.num >0){
                    this.num --;
                }else{
                    alert("最小值为0")
                }
            }
        },
        computed:{
            jisuan(){
                return this.a + this.b;
            },
            fullNameComputed(){
                return this.firstName + this.lastName;
            }
        },
        filters:{
            guolv(v){
                console.info(v);
                return "$:"+v;
            }
        },
        watch:{
            firstName(newValue,oldValue){
                console.info(oldValue+"==="+newValue)
                this.fullName =  newValue + this.lastName;
            },
            lastName(newValue,oldValue){
                this.fullName = this.firstName + newValue
            }
        }
    });

</script>

</body>
</html>